<template>
  <div class="container">
    <!-- header -->
    <mt-header class="header" fixed title="个人小站">
        <div slot="left" v-show="flag" id="back" @click="back">
          <mt-button icon="back">返回</mt-button>
        </div>
    </mt-header>
    <!-- router-view -->
    <transition>
      <router-view></router-view>
    </transition>
    <!-- tabbar -->
    <mt-tabbar v-model="selected">
      <mt-tab-item id="首页" class="barList">
        <router-link to="/home" tag="span" slot="icon" class="iconfont icon-shouye1"></router-link>
        首页
      </mt-tab-item>
      <mt-tab-item id="搜索" class="barList">
        <router-link to="/search" tag="span" slot="icon" class="iconfont icon-sousuo"></router-link>
        搜索
      </mt-tab-item>
      <mt-tab-item id="购物车" class="barList">
        <router-link to="/shopcar" tag="span" slot="icon" class="iconfont icon-gouwuche">        
          <!-- <mt-badge type="error" size="small" class="shopcaricon">{{$store.getters.getAllcount}}</mt-badge> -->
          <span class="mui-badge mui-badge-danger shopcaricon">{{$store.getters.getAllcount}}</span>
        </router-link>
        购物车
      </mt-tab-item>
      <mt-tab-item id="会员" class="barList">
        <router-link to="/membar" tag="span" slot="icon" class="iconfont icon-huiyuan"></router-link>
        会员
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: '首页',
      flag: false
    }
  },
  methods: {
    back() {
      this.$router.go(-1)
    }
  },
  watch: {
    // $route(to,from){
    //   if (to.path == '/home') {
    //     this.flag = false
    //   } else {
    //     this.flag = true
    //   }
    // }
    '$route.path': function(newVal) {
      if (newVal === '/home') {
        this.flag = false
      } else {
        this.flag = true
      }
    }
  },
  created() {
    this.flag = this.$route.path === '/home' ? false : true
  }
}
</script>

<style scoped>
  /* 中心 */
  .container {
    padding-top: 40px;
    padding-bottom: 50px;
    overflow-x: hidden;
  }
  /* 头部 */
  .header {
    background: #FBB500;
    box-shadow: 0 1px 6px #ccc;
  }
  /* 底部导航栏 */
  .iconfont {
    font-size: 24px;
  }
  .barList {
    color: #5D5F6A;
  }
  .shopcaricon {
    position: absolute;
  }
  /* 路由切换动画 */
  .v-enter {
    opacity: 0;
    transform: translateX(100%);
  }
  .v-leave-to {
    opacity: 0;
    transform: translateX(-100%);
    position: absolute;
  }
  .v-enter-active,
  .v-leave-active {
    transition: all 0.6s ease;
  }
  .mint-tabbar {
    position: fixed!important;
  }
</style>

<style>
    .is-selected .mint-tab-item-label{
        color: #c09947;
    }
    .mint-tab-item-label {
        color: #333;
        font-size: 14px;
    }
</style>
